<template>
	<div>
		<panle title='手机验证码查询' content=""></panle>
		<div>
			<el-row :span="12" class="pt20">
				<el-col :span="12">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item>
							<el-input v-model="formInline.phone" clearable placeholder="请输入手机号"></el-input>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" size="mini" @click="serach">查询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>

		<div>
			验证码：<span>{{code}}</span>
		</div>


	</div>
</template>

<script>
	import { queryPhone } from '@/api/live/datas'

	export default {
		name: 'Live-Index',
		data() {
			return {
				code: '',
				formInline: { phone: '' },
			}
		},
		created() {
			this.init();
		},
		methods: {
			async init() {
				let param = {
					"phone": this.formInline.phone
				}
				const { data = [], code = 0 } = await queryPhone(param)
				if (code === 200) {
					this.code = data.code;
				}
			},
			handleClear() {
				this.formInline.phone = ''
				this.init()
			},
			serach() {
				this.init();
			},

		}
	}

</script>

<style lang="scss">
	@import "@/assets/css/common.scss";

	.el-select .el-input {
		width: 200px;
	}
</style>
